<script setup>

import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
import * as echarts from "echarts"
import { useStore } from 'vuex'
import zaoZhuangJson from '../../../../../assets/zaozhuang.json'

const props = defineProps({
    mapList: {
        type: Array,
        default: []
    }
})

const store = useStore()


let eCharts = null
let map = ref(null)
let timer = undefined

// 坐标列表
let positionData = ref([])

onMounted(() => {
    findCurrentCityData()
	init()
})
watch(
	() => props.mapList,
	(newV, oldV) => {
		if(!eCharts) {
			init()
		}
	}
);


let currentCity = computed(() => {
    return store.state.currentCityName
})

const init = async (type) => {
    echarts.registerMap("city", { geoJSON: zaoZhuangJson })
    eCharts = echarts.init(map.value)
    eCharts.setOption(option())

    // 点击地图
    eCharts.on('click', function (params) {
        store.dispatch('SETCURRENTCITY',  cityData[params.name].val1)
    })
}

// 根据name 查找该区域数据
let cityData = $ref({})
const findCurrentCityData = (name) => {
    props.mapList.forEach(item => {
        cityData[item.val1] = item
    })
}

const option = () => {
    return reactive({
        // tooltip: {
		// 	show: false,
		// 	trigger: "item",
		// 	backgroundColor: "rgba(0, 0, 0, 1)",
        //     enterable: true,
        //     padding: 10,
        //     extraCssText:
        //         'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);border-radius: 2px;opacity: 0.8;border: 2px solid #000000;width: 300px;height: 260px;font-size: 20px;text-align:center',
        //     textStyle: {
        //         color: '#fff',
        //     },
        //     formatter: function (params) {
        //         return `
        //             <div class="city-tooltip">
        //                 <div class="name">${cityData[params.name].val1}</div>
        //                 <div class="brand">${cityData[params.name].val2}</div>
        //                 <ul>
        //                     <li>计划拓岗人数：<span>${cityData[params.name].val3}</span></li>
        //                     <li>城乡公益岗上岗人数：<span>${cityData[params.name].val4}</span></li>
        //                     <li>生态岗上岗人数：<span>${cityData[params.name].val5}</span></li>
        //                 </ul>
        //             </div>
        //         `
        //     },
		// },
        geo: [
            {
                map: 'city',
                top: '11%',
                itemStyle: {
                    normal: {
                        areaColor: '#12C0E9',
                        borderColor: '#12C0E9',
                    },
                    emphasis: {
                        show: true,
                        areaColor: '#30B7FF',
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                    },
                }
            },
            {
                map: 'city',
            }
        ],
        series: [
            {
                type: "map",
                mapType: "city", // 自定义扩展图表类型
                itemStyle: {
                    normal: {//阴影
                        areaColor: '#01E9FF'
                    },
                    emphasis: {
                        show: true,
                        areaColor: '#FCDC30',
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                    },
                },
                label: {
                    emphasis: {
                        show: true,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                    },
                    show: true,
                    fontSize: '16',
                    color: '#000'
                },
            },
            { // 涟漪效果
                // name: 'Top 6',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: positionData,
                symbolSize: function (val) {
                    return 16;
                },
                encode: {
                    value: 2
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke',
                    color: '#0094E1'
                },
                emphasis: {
                    scale: false
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(230, 10, 10, 1)',
                    color: '#0094E1'
                },
                zlevel: 1,
            }
        ]
    })
}


// 获取区域中间点
const mapGetCenter = (pointArray) => {
    var sortedLongitudeArray = pointArray.map(item => item[1]).sort();//首先对经度进行排序，红色部分是array中经度的名称
    var sortedLatitudeArray = pointArray.map(item => item[0]).sort();//对纬度进行排序，红色部分是array中纬度的名称
    var centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
    const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);

    //如果经纬度在array中不是数字类型，需要转化为数字类型进行计算，如果是可以去掉parseFloat处理
    //console.log(centerLongitude+"kkk"+centerLatitude);
    return [centerLatitude, centerLongitude];
}

onUnmounted(() => {
    clearInterval(timer)
})



</script>

<template>
    <div class="map-warp">

        <div class="map" ref="map"></div>

        <div class="tag-item">一湖<p>（微山湖）</p></div>
        <div class="tag-item tag-item-2">一山<p>（抱犊崮）</p></div>
        <div class="tag-item tag-item-3 small">一道<p>（环城绿道）</p></div>
        <div class="tag-item tag-item-4 small">一河<p>（大运河）</p></div>
        <div class="tag-item tag-item-5 small">一园<p>（冠世榴园）</p></div>
        <div class="tag-item tag-item-6">一城<p>（台儿庄古城）</p></div>
        <div class="tag-item tag-item-7">一馆<p>（铁道游击队）</p></div>
        
        <div class="current-city-brand" v-if="cityData[currentCity]">{{ cityData[currentCity].val2 }}</div>

    </div>
</template>

<style lang="less" scoped>
.map-warp {
    width: 895px;
	height: 760px;
	margin-top: 10px;
    background: url('../../../../../assets/images/home/map-bottom-bg.png') bottom center no-repeat, url('../../../../../assets/images/home/map-bg.png') center 0px no-repeat;
	position: relative;

    // background-size: 100% 100%, 568px 90px;

    .map {
        width: 100%;
        height: 780px;
		position: absolute;
		top: -80px;
		left: 0;
	}

    .tag-item{
        width: 109px;
        height: 109px;
        position: absolute;
        top: 20px;
        left: 60px;
        font-size: 30px;
        color: #00FFF6;
        z-index: 9;
        background: url('../../../../../assets/images/home/tag.png') center no-repeat;
        background-size: 100% 100%;
        text-align: center;
        padding: 25px 0;
        animation: bounce-down 2.6s linear infinite;
        
        p{
            font-size: 14px;
            padding-top: 10px;
        }

        &.small{
            width: 96px;
            height: 96px;
            font-size: 24px;
        }

        &-2{
            top: 80px;
            left: 650px;
        }

        &-3{
            top: 280px;
            left: 80px
        }

        &-4{
            top: 280px;
            left: 720px;
        }

        &-5{
            top: 400px;
            left: 60px
        }

        &-6{
            top: 500px;
            left: 730px;
        }

        &-7{
            top: 500px;
            left: 200px;
        }
    }

    .current-city-brand{
        position: absolute;
        width: 100%;
        bottom: 100px;
        left: 0;
        text-align: center;
        color: #1ef5ff;
        background: linear-gradient(0deg, #24b6fe, #1ef5ff);
        font-weight: bold;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 32px;
    }
}


@keyframes bounce-down {
    25% {
            transform: translateY(-4px);
    }
    50%, 100% {
            transform: translateY(0);
    }
    75% {
            transform: translateY(4px);
    }
}
</style>

<style lang="less">
    .city-tooltip{
        color: #fff;

        .name{
            padding: 14px 0;
            font-weight: bold;
        }

        .brand{
            color: #01E9FF;
            font-size: 16px;   
            padding-bottom: 20px;
            border-bottom: 1px solid #FFFFFF;
        }

        ul{
            li{
                font-size: 16px;
                padding-top: 20px;

                span{
                    color: #FFF000;
                    font-size: 24px;
                }
            }
        }
    }
</style>